#include("/_function/layout/default.vue")
#@layout(i18n['title'])
#define jsCustom()
<template type="text/x-template" id="tpl-center-content">
    <div id="content">
        <div class="page-header">
            <div class="container-fluid">
                <div class="pull-right">
                    <button @click="openAddOrUpdate({})" class="btn btn-primary"><i class="fa fa-plus"></i></button>
                </div>
                <h1>用户管理</h1>
                <ul class="breadcrumb">
                    <li><a href="#(CONTEXT_PATH)/common/dashboard">首页</a></li>
                    <li><a href="#(CONTEXT_PATH)/system/localisation/language">用户</a></li>
                </ul>
            </div>
        </div>
        <div class="container-fluid">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="fa fa-list"></i> #(i18n['text_list'])</h3>
                </div>
                <div class="panel-body">
                    <data-table url="#(CONTEXT_PATH)/api/system/user/group/datatable"
                                :columns="datatable.columns"
                                :draw="datatable.draw"
                                :searching="true"
                    >
                    </data-table>
                </div>
            </div>
        </div>
    </div>
</template>
#include("/_function/component/column-status.vue")
#include("/_function/component/column-action.vue")
#include("/_function/component/datatable.vue")
#include("/system/localisation/language_form.vue")
<script>
document.addEventListener("DOMContentLoaded", function () {
    Vue.component('center-content', {
        created: function () {
            window.language_cc = this;
        },
        template: document.getElementById('tpl-center-content'),
        data: function () {
            return {
                datatable: {
                    draw: 1,
                    columns: [
                        {title: 'ID', data: 'userGroupId'},
                        {title: '编号', data: 'groupCode'},
                        {title: '名称', data: 'name'},
                        {title: '描述', data: 'description'},
                        {
                            title: '菜单',
                            data: 'adminMenu',
                            render: (v) => {
                                return (v||{}).name
                            }
                        },
                        {
                            title: "操作",
                            width: "12%",
                            render: (s, d, row) => {
                                return new Vue(
                                    {
                                        template: "<column-action :data='data' :fns='fns'></column-action>",
                                        data: () => {
                                            return {
                                                data: JSON.stringify(row),
                                                fns: [
                                                    "language_cc.openAddOrUpdate",
                                                    "language_cc.openDelete"
                                                ]
                                            }
                                        }
                                    }
                                ).$mount().$el.outerHTML;
                            }
                        }
                    ]
                }
            }
        },
        methods: {
            openAddOrUpdate: function (row) {
                let self = this;
                let id = "layer-" + Date.now();
                let v;
                layer.open({
                    title: "新增或编辑",
                    type: 1,
                    area: ['60%', '60%'],
                    maxmin: true,
                    content: "<div id='" + id + "'></div>",
                    btn: ["#(i18n['button_ok'])", "#(i18n['button_close'])"],
                    success: function () {
                        v = new Vue(
                            {
                                el: "#" + id,
                                template: "<language-form :row='row' :errors='errors' :locales='locales'></language-form>",
                                data: () => {
                                    return {
                                        row: row,
                                        locales: [],
                                        errors: {}
                                    }
                                },
                                created: function () {
                                    gateway.post('api/system/localisation/language/locales').then((response) => {
                                        this.locales = response.data.locales
                                    })
                                },
                                methods: {
                                    submit: function (index) {
                                        var i = layer.load(2)
                                        this.errors = {}
                                        gateway.post('api/system/localisation/language/saveOrUpdate', this.row).then((response) => {
                                            var data = response.data;
                                            this.errors = data.errors || {};
                                            if (data.code === '00000') {
                                                layer.alert(data.message, {icon: 1})
                                                self.datatable.draw = self.datatable.draw + 1
                                                layer.close(index)
                                            }
                                        }).finally(() => {
                                            layer.close(i)
                                        })
                                    }
                                }
                            }
                        )
                    },
                    yes: function (index, layero) {
                        v.submit(index);
                    },
                    cancel: function (index) {
                        layer.close(index);
                    }
                });
            },
            openDelete: function (row) {
                let self = this
                layer.confirm("确定删除么?", function (index) {
                    var i = layer.load(2)
                    gateway.post('api/system/localisation/language/delete', {
                        languageId: row['languageId']
                    }).then((response) => {
                        var data = response.data;
                        layer.alert(data.message, {icon: 1})
                    }).finally(() => {
                        self.datatable.draw = self.datatable.draw + 1
                        layer.close(i)
                        layer.close(index)
                    })
                });
            }
        }
    })
})
</script>
#end